<template>
  <div>
<van-nav-bar
  title="上架周边"
  left-arrow
  @click-left="onClickLeft"
/>

<van-form @submit="onSubmit">
  <van-cell-group inset>
    <van-field
      v-model="merchname"
      name="商品名"
      label="商品名"
      placeholder="商品名"
      :rules="[{ required: true, message: '请填写商品名' }]"
    />
    <van-field
      v-model="merchdetails"
      rows="5"
      autosize
      label="商品详情"
      type="textarea"
      maxlength="200"
      placeholder="商品详情（选填）"
      show-word-limit
      :rules="[{ required: true, message: '请填写商品详情' }]"
    />
    <van-field
      v-model="merchprice"
      name="商品价格"
      label="商品价格"
      placeholder="商品价格"
      :rules="[{ required: true, message: '请填写商品价格' }]"
    />

    <van-field name="uploader" label="图片上传">
      <template #input>
        <van-uploader v-model="value" />
      </template>
    </van-field>

  </van-cell-group>
  <div style="margin: 16px;">
    <van-button round block type="primary" @click="btn" native-type="submit">
      提交
    </van-button>
  </div>
</van-form>

  </div>
</template>

<script>
import { ref } from 'vue';
import axios from 'axios';
import router from '@/router';
  export default {
    data() {
      return {

      }
    },
    setup() {
      const onClickLeft = () => history.back();
      const merchname = ref('');
      const merchdetails = ref('');
      const merchprice = ref('');
      const onSubmit = (values) => {
        // console.log('submit', values);
      };

      const value = ref([
      //  { url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg' },
      ]);

      return {
        onClickLeft,
        merchname,
        merchdetails,
        merchprice,
        onSubmit,
        value,
      };
    },
    created() {
      axios.get('http://localhost:8087/merch/selectAll').then((res)=>{
          this.wenzhs = res.data.data
          console.log(this.wenzhs.length)
      })
    },
    methods:{
      btn() {
        axios.post("http://localhost:8087/merch/save", {
          merchId: Math.random()*1000000,
          merchName: this.merchname,
          merchDetails: this.merchdetails,
          merchPrice: this.merchprice,
        }).then(function() {
          router.push("/ms")
        }).catch(function(error) {
          console.log(error);
        })
      }
    },
  };

</script>

<style lang="scss" scoped>

</style>